import React, { Component } from 'react';
import { connect } from 'react-redux';
import {Link} from 'react-router-dom';

function mapStateToProps(state) {
    return {

    };
}

function mapDispatchToProps(dispatch) {
    return {
       addCart(item){
           dispatch({type:'ADD_CART',data:item})
       },

       removeCart(item){
        dispatch({type:'REMOVE_CART',data:item})
       }
    };
}

class ProductList extends Component {
    render() {
        let {list}=this.props;
        return (
            <div>
               {list.map((v,i)=>{
                            return <div key={i}>
                              <Link to={'/detail/'+v.key}> {v.title} </Link>  <br/>
                              <Link to={'/detail/'+v.key}> <img src={v.image} alt="" /></Link>

                               <span className={v.cartnum>0?'':'hidden'}><button onClick={()=>{
                                   this.props.removeCart(v);
                               }}>-</button> {v.cartnum}  </span> <button onClick={()=>{
                                   this.props.addCart(v);
                               }}>+</button>
                                </div>
                        })}
            </div>
        )
    }
}

export default connect(
    mapStateToProps,mapDispatchToProps
)(ProductList);